<html>
    <head>
        <meta charset="utf-8">
        <script src="../dist/claygl.js"></script>
    </head>
    <body>
        <canvas width="1200" height="640" id="main"></canvas>
        <script type="text/javascript">
            var Shader = clay.Shader;
            var Vector3 = clay.Vector3;

            var renderer = new clay.Renderer({
                canvas: document.getElementById('main'),
                devicePixelRatio: 1.0
            });

            var shadowMapPass = new clay.prePass.ShadowMap({
                softShadow: clay.prePass.ShadowMap.VSM
            });

            var scene = new clay.Scene();
            var camera = new clay.camera.Perspective({
                aspect: renderer.getViewportAspect(),
                far: 100
            });

            var light = new clay.light.Spot({
                position: new Vector3(0, 4, 4),
                intensity: 0.5,
                shadowBias: 0.001,
                shadowResolution: 512
            });
            scene.add(light);

            var light2 = new clay.light.Spot({
                position: new Vector3(0, 4, -4),
                intensity: 0.5,
                shadowBias: 0.001,
                shadowResolution: 512
            });
            scene.add(light2);

            var plane = new clay.geometry.Plane({
                widthSegments: 1,
                heightSegments: 1
            });
            var shader = clay.shader.library.get('clay.standard');

            var material = new clay.Material({
                shader: shader
            });

            var cube = new clay.Mesh({
                material: material,
                geometry: new clay.geometry.Cube()
            });
            cube.position.y = 1;
            scene.add(cube);

            camera.position.set(0, 4, 5);
            camera.lookAt(new Vector3(0, 1, 0));

            var planeMesh = new clay.Mesh({
                geometry: plane,
                material: material
            });
            planeMesh.rotation.rotateX(-Math.PI/2);
            planeMesh.scale.set(10, 10, 10);

            scene.add(planeMesh);

            var zeroVector = new Vector3();
            var upAxis = new Vector3(0, 1, 0);

            var timeline =  new clay.Timeline();
            timeline.start();
            timeline.on('frame', function () {
                light.rotateAround(zeroVector, upAxis, 0.01);
                light2.rotateAround(zeroVector, upAxis, -0.01);
                light.lookAt(zeroVector);
                light2.lookAt(zeroVector);
                shadowMapPass.render(renderer, scene, camera);
                renderer.render(scene, camera);
            });

        </script>
    </body>
</html>